<template>
    <div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>报表查询</el-breadcrumb-item>
			<el-breadcrumb-item>报表明细</el-breadcrumb-item>
		</el-breadcrumb>
        <div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
                        <el-button type="success" @click="back()" round size="mini">返回</el-button>
						<el-button type="default" @click="downloadOrder()" round size="mini">导出明细</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="searchForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
                            <el-form-item>
                                <el-autocomplete
                                    class="inline-input w_200"
                                    v-model="staff_name"
                                    :fetch-suggestions="querySearchStaff"
                                    placeholder="接单人"
                                    :trigger-on-focus="false"
                                    @select="handleSelectStaff"
                                    clearable
                                    @clear='clearStaff'
                                    @input="changeStaff"
                                ></el-autocomplete>
							</el-form-item>
                            <el-form-item>
								<el-input size="mini" class="w_160" v-model="searchForm.task_sn" placeholder="任务编号" clearable></el-input>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn">搜索</el-button>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
            <!-- 表格数据 -->
            <div class="tableMaxBox">
				<template>
					<el-table :data="tableList" stripe>
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column property="sn" label="任务编号" min-width="100"></el-table-column>
                        <el-table-column property="shop_name" label="店铺名称" min-width="120"></el-table-column>
                        <el-table-column property="demand_sn" label="订单编号" min-width="120"></el-table-column>
                        <el-table-column property="shop_adjust_sn" label="调账记录编号"></el-table-column>
                        <el-table-column property="shop_adjust_remark" label="调账记录备注"></el-table-column>
                        <el-table-column property="job_name" label="岗位"></el-table-column>
                        <el-table-column property="hour_expect" label="计划时长(H)">
                            <template slot-scope="{ row }">
                                {{ second2Hour(row.hour_expect) }}
                            </template>
                        </el-table-column>
                        <el-table-column property="staff_name" label="接单人"></el-table-column>
                        <el-table-column property="actual_start_time" label="计费开始时间" min-width="120"></el-table-column>
                        <el-table-column property="actual_end_time" label="计费结束时间" min-width="120"></el-table-column>
                        <el-table-column property="hour_actual" label="计费时长(H)">
                            <template slot-scope="{ row }">
                                {{ second2Hour(row.hour_actual) }}
                            </template>
                        </el-table-column>
                        <el-table-column property="amout_shop" label="单价(元/H)">
                            <template slot-scope="{ row }">
                                {{ moneyUnitCent2Coin(row.amout_shop) }}
                            </template>
                        </el-table-column>
                        <el-table-column property="show_amount" label="金额">
                            <template slot-scope="{ row }">
                                {{ moneyUnitCent2Coin(row.show_amount) }}
                            </template>
                        </el-table-column>
                        <el-table-column property="task_status_name" label="任务状态"></el-table-column>
                        <el-table-column property="shop_adjust_status_name" label="调账状态"></el-table-column>
                    </el-table>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
    import { fetchFlexibleBillDetail } from '@/api/sheet.js'
    import { userList } from '@/api/user.js'
    import qs from "qs";
    const common = require("../../../static/tool.js");
    export default {
        name: 'ReportDetails',
        data() {
            return {
                url: common.url,
                searchForm: {
                    staff_id: '', //接单人
                    task_sn: '', //任务编号
                },
                staff_name: '',
                tableList: [] //列表数据
            }
        },
        mounted() {
            this.searchForm = this.$route.query
            this.getReportist()
        },
        methods: {
            //搜索
            shearchBtn() {
                this.getReportist()
            },
            //重置
            resetBtn(){
                this.searchForm.staff_id = ''
                this.searchForm.task_sn = ''
                this.staff_name = ''
                this.getReportist()
            },
            //获取列表数据
            async getReportist(){
                try {
                    let res = await fetchFlexibleBillDetail({ 
                        ...this.searchForm
                    })
                    if(res){
                        this.tableList = res
                    }else{
                        this.tableList = []
                    }
                    this.total = res.count
                } catch (err) {
                    console.log('err:', err)
                }
            },
            async querySearchStaff(queryString, cb) {
                if(queryString){
                    try {
                        let ret = await userList({
                            certification_status: 1, 
                            fields: "id,staff_sn,mobile,certification_info",
                            name: queryString
                        });
                        ret.list.forEach((item) => {
                            item.value = item.name;
                        });
                        var restaurants = ret.list;
                        var results = queryString
                        ? restaurants.filter(this.createFilterStaff(queryString))
                        : restaurants;
                        cb(results);
                    } catch (err) {
                        console.log("error:", err);
                    }
                }
            },
            createFilterStaff(queryString) {
                return (staff_name) => {
                    return (
                    staff_name.value
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                    );
                };
            },
            //选择接单人
            handleSelectStaff(item) {
                this.searchForm.staff_id = item.id
                this.staff_name = item.name
            },
            //点击X清空接单人
            clearStaff(){
                this.searchForm.staff_id = ''
                this.staff_name = ''
            },
            //手动清空input数据
            changeStaff(queryString){
                if(!queryString){
                    this.searchForm.staff_id = ''
                }
            },
            //返回
            back(){
                this.$router.go(-1)
            },
            //导出明细
            downloadOrder(){
                const params = qs.stringify({
                    token: JSON.parse(sessionStorage.getItem("manageInfo")).token,
                    ...this.searchForm
                });
                window.location.href = this.url + "/statistics/accountsFlexible/exportDetail?" + params;
            }
        }
    }
</script>
<style scoped lang="scss">
    .success{
        color: green !important;
    }
    .danger{
        color: red !important;
    }
</style>


// WEBPACK FOOTER //
// src/components/sheet/ReportDetails.vue